<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>公告列表</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
    <link rel="stylesheet" th:href="@{/admin/assets/css/bootstrap-clearmin.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/admin/assets/css/roboto.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/admin/assets/css/material-design.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/admin/assets/css/small-n-flat.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/admin/assets/css/font-awesome.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" type="text/css">
</head>
<style type="text/css">
    table {
        width: 30em;
        table-layout: fixed; /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
    }

    td {
        width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<body class="cm-no-transition cm-1-navbar">
<!--后台公共侧边栏（菜单）-->
<div th:replace="common/admin/common::common_siderbar"></div>
<!--后台公共顶部-->
<div th:replace="common/admin/common::common_top"></div>
<div id="app">
    <div id="global">
        <div class="container-fluid">
            <div class="row cm-fix-height">
                <div class="col-sm-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <h4>公告列表</h4>
                            <div style="margin: 10px 0;">
                                <div class="btn-group" role="group">
                                    <button @click="showBox('add',1)" class="btn btn-turquoise" type="button">
                                        <i class="fa fa-plus"></i> 添加
                                    </button>
                                </div>
                            </div>
                            <table class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th>
                                    <th>内容</th>
                                    <th>分类</th>
                                    <th>发布时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="notice in noticeList">
                                    <td>{{notice.id}}</td>
                                    <td>{{notice.title}}</td>
                                    <td>{{notice.content}}</td>
                                    <td>{{notice.classify}}</td>
                                    <td>{{notice.createDate | formatDate}}</td>
                                    <td>
                                        <button @click="showBox('update',notice.id);" class="btn btn-info"
                                                type="button">修改
                                        </button>
                                        <button @click="deleteNotice(notice.id);" class="btn btn-danger" type="button">
                                            删除
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="row text-center">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <nav>
                                    <ul class="pagination">
                                        <li :class="{'disabled':pager.currPage == 1}"><span
                                                @click="page(pager.currPage-1)">&laquo;</span></li>
                                        <li :class="{'active':pager.currPage == i}" v-for="i in pager.totalPage">
                                            <span @click="page(i)">{{i}}</span>
                                        </li>
                                        <li :class="{'disabled':pager.currPage == pager.totalPage}"><span
                                                @click="page(pager.currPage+1)">&raquo;</span></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="actionDiv" style="display: none;padding: 24px 89px 10px 15px;">
        <form class="layui-form layui-form-pane" id="noticeForm" lay-filter="noticeForm">

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" id="title" lay-verify="required" name="title" placeholder="请输入"
                               type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline">
                        <select name="type">
                            <option :value="value" v-for="value in noticeType">{{value}}</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-form-item" id="myEditDiv">
                <textarea id="myEdit" name="content" style="display: none;"></textarea>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button @click="submit" class="layui-btn" type="button">发布</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script th:replace="common/admin/common::common_footer_script"></script>
<script th:src="@{/script/vue.min.js}" type="text/javascript"></script>
<script th:src="@{/script/axios.min.js}" type="text/javascript"></script>
<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
<script type="text/javascript">
    document.title = '亿人宝 - 公告列表';
    const baseUrl = '[[@{/admin/}]]';
    let layedit = '';
    let myEdit = '';
    let form = '';
    layui.use(['form', 'layedit'], function () {
        form = layui.form;
        layedit = layui.layedit;
    });
    new Vue({
        el: '#app',
        data: {
            title: '',
            action: '',
            pager: {
                currPage: 1,
                pageSize: 10,
                totalRow: 0,
                totalPage: 0
            },
            notice: {
                id: 0,
                title: '',
                createDate: '',
                classify: '',
                content: ''
            },
            noticeList: [],
            noticeType: {}
        },
        filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
            },
        },
        methods: {
            //加载公告列表
            loadNoticeList: function () {
                axios.get(baseUrl + 'advertisement/findNoticeWithPage', {
                    params: {
                        'currPage': this.pager.currPage
                    }
                })
                    .then(response => {
                        console.log(response);
                        this.pager = response.data;
                        this.noticeList = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //加载公告分类列表
            loadNoticeType: function () {
                axios.get(baseUrl + 'advertisement/findNoticeType')
                    .then(response => {
                        console.log(response);
                        this.noticeType = response.data.obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            page: function (currPage) {
                if (currPage != 0 && this.pager.totalPage != currPage - 1) {
                    this.pager.currPage = currPage;
                    this.loadNoticeList();
                }
            },
            //弹出操作框
            showBox: function (method, id) {
                if (method === 'add') {
                    this.title = '添加公告';
                    this.notice = {};
                    form.val('noticeForm', {
                        'title': '',
                        'type': '媒体报道'
                    });
                    $('#myEdit').text('');
                    layer.open({
                        title: this.title,
                        type: 1,
                        content: $('#actionDiv'),
                        area: ['800px', '550px']
                    });
                } else if (method === 'update') {
                    this.title = '修改公告';
                    let load = layer.load(1);
                    axios.get(baseUrl + 'advertisement/findNoticeById/' + id)
                        .then(response => {
                            layer.close(load);
                            console.log(response);
                            this.notice = response.data.obj;
                            $('#myEdit').text(this.notice.content);
                            //表单赋值
                            form.val('noticeForm', {
                                'title': this.notice.title,
                                'type': this.notice.classify
                            });
                            layer.open({
                                title: this.title,
                                type: 1,
                                content: $('#actionDiv'),
                                area: ['800px', '550px']
                            });
                            this.buildEdit();
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
                this.buildEdit();
                this.action = method;
            },
            //提交表单
            submit: function () {
                let action = this.action;
                //同步编辑器内容到textarea
                layedit.sync(myEdit);
                //表单数据
                let formData = form.val('noticeForm');

                if (formData.title.trim() == '') {
                    layer.msg('请输入标题', {
                        icon: 0
                    });
                    return;
                }

                if (layedit.getText(myEdit).trim() == '') {
                    layer.msg('请输入内容', {
                        icon: 0,
                        time: 2000
                    });
                    return;
                }

                if (action === 'add') {
                    let load = layer.load(2);
                    axios.post(baseUrl + 'advertisement/addNotice', {
                        title: formData.title,
                        classify: formData.type,
                        content: formData.content
                    })
                        .then(response => {
                            let _this = this;
                            console.log(response);
                            layer.closeAll();
                            layer.msg('添加成功', {
                                icon: 1,
                                time: 2000
                            }, function () {
                                //location.reload()
                                _this.loadNoticeList();
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                } else if (action === 'update') {
                    let load = layer.load(2);
                    axios.put(baseUrl + 'advertisement/updateNotice', {
                        id: this.notice.id,
                        createDate: this.notice.createDate,
                        title: formData.title,
                        classify: formData.type,
                        content: formData.content
                    })
                        .then(response => {
                            let _this = this;
                            console.log(response);
                            layer.closeAll();
                            layer.msg('修改成功', {
                                icon: 1,
                                time: 2000
                            }, function () {
                                //location.reload()
                                _this.loadNoticeList();
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
            deleteNotice: function (id) {
                layer.confirm('确认删除吗？', {icon: 3, title: '提示'}, function (index) {
                    let load = layer.load(2);
                    axios.delete(baseUrl + 'advertisement/deleteNotice/' + id)
                        .then(response => {
                            let _this = this;
                            layer.closeAll();
                            layer.msg('删除成功', {
                                icon: 1,
                                time: 2000
                            }, function () {
                                //location.reload()
                                _this.loadNoticeList();
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                })
            },
            //初始化富文本编辑器
            buildEdit: function () {
                myEdit = layedit.build('myEdit', {
                    tool: ['strong' //加粗
                        , 'italic' //斜体
                        , 'underline' //下划线
                        , 'del' //删除线

                        , '|' //分割线

                        , 'left' //左对齐
                        , 'center' //居中对齐
                        , 'right' //右对齐
                        , 'link' //超链接
                        , 'unlink' //清除链接
                        , 'face']
                });
            }
        },
        mounted() { //初始化方法
            this.loadNoticeList();
            this.loadNoticeType();
        }
    });
</script>
</body>
</html>
